<!-- src/components/RechargeRecords.vue -->
<template>
  <div class="recharge-section">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>充值记录</span>
        </div>
      </template>
      <div class="table-container">
        <el-table :data="rechargeRecords" style="width: 100%" stripe>
          <el-table-column prop="id" label="订单ID" width="100" />
          <el-table-column prop="username" label="用户名" width="120" />
          <el-table-column prop="amount" label="充值金额" width="100">
            <template #default="scope"> ¥{{ scope.row.amount }} </template>
          </el-table-column>
          <el-table-column prop="points" label="获得积分" width="100" />
          <el-table-column prop="paymentMethod" label="支付方式" width="120" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag
                :type="
                  scope.row.status === '成功'
                    ? 'success'
                    : scope.row.status === '失败'
                    ? 'danger'
                    : 'warning'
                "
              >
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="充值时间" width="180" />
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          v-model="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="total, prev, pager, next"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const rechargeRecords = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 模拟充值记录数据
const mockRechargeRecords = [
  {
    id: "R20240601001",
    username: "admin",
    amount: 99.0,
    points: 990,
    paymentMethod: "支付宝",
    status: "成功",
    createTime: "2024-06-01 09:30:22",
  },
  {
    id: "R20240601002",
    username: "user1",
    amount: 199.0,
    points: 2189,
    paymentMethod: "微信",
    status: "成功",
    createTime: "2024-06-01 14:22:10",
  },
  {
    id: "R20240602001",
    username: "user2",
    amount: 50.0,
    points: 500,
    paymentMethod: "微信",
    status: "失败",
    createTime: "2024-06-02 11:15:45",
  },
  {
    id: "R20240603001",
    username: "admin",
    amount: 299.0,
    points: 3588,
    paymentMethod: "银行卡",
    status: "成功",
    createTime: "2024-06-03 16:40:33",
  },
  {
    id: "R20240604001",
    username: "user1",
    amount: 10.0,
    points: 100,
    paymentMethod: "支付宝",
    status: "处理中",
    createTime: "2024-06-04 08:12:55",
  },
];

onMounted(() => {
  // 模拟获取充值记录数据
  rechargeRecords.value = mockRechargeRecords;
  total.value = mockRechargeRecords.length;
});

const handlePageChange = (page) => {
  currentPage.value = page;
  // 这里可以调用API获取对应页面数据
};
</script>

<style scoped>
.recharge-section .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recharge-section .pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>